import React from 'react'
import {browserHistory} from 'react-router'

import TopBar from '../components/TopBar'
import Footer from '../components/Footer'
import DialogImg from '../components/DialogImg'

import Api from '../router/Api'


import '../public/css/common.css'
import '../public/css/activation.scss'
import requestSign from "../public/js/requestSign";

class Activation extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            isShow:false,
            componenyName:"",//企业全称
            socialCreditCode:"",//社会信用代码
            legalName:"",//法人姓名
            legalIdentitycard:"",//法人身份证
            legalTelphone:"",//法人联系方式
            borrowerName:"",//借款人姓名
            identitycardNumber:"",//身份证
            bankcard:"",//银行账号
            bankName:"",//银行名称
            telephone:"",//银行预留手机号
            information:"",//相关资料
            dialogImg:"",
            imgSrc:""
        }
    }
    componentWillMount(){//在这个方法中请求接口
        const token = sessionStorage.getItem('token');
        const _this = this;
        Api.getTimeStamp()
            .then(function (res) {
                const timestamp = res.data.data.timestamp;
                const sign = requestSign({timestamp,token});
                console.log(sign);
                Api.getBorrowUserInfo({
                    token:token,
                    timestamp:timestamp,
                    sign:sign.sign
                })
                    .then(function (res) {
                        console.log(res);
                        if(res.data.data.userType === 0){
                            console.log(0)
                            _this.setState({
                                telephone:res.data.data.phone,
                                borrowerName:res.data.data.realName,
                                bankcard:res.data.data.bankCardId,
                                identitycardNumber:res.data.data.certifyName,
                                bankName:res.data.data.branchBankInfo,
                                information:res.data.data.certifyPic
                            })
                        }else{
                            console.log(1)
                            _this.setState({
                                telephone:res.data.data.phone,
                                componenyName:res.data.data.realName,
                                bankcard:res.data.data.bankCardId,
                                socialCreditCode:res.data.data.certifyName,
                                bankName:res.data.data.branchBankInfo,
                                legalName:res.data.data.corporateName,
                                legalIdentitycard:res.data.data.corporateCard,
                                information:res.data.data.certifyPic
                            })
                        }

                    })
            })
            .catch(function (err) {
                console.log(err);
            })
    }

    handleActive(e){
        e.preventDefault();
        const token = sessionStorage.getItem('token');
        const _this = this;
        Api.getTimeStamp()
            .then(function (res) {
                const timestamp = res.data.data.timestamp;
                const sign = requestSign({timestamp,token});
                Api.activiAccount({
                    token:token,
                    timestamp:timestamp,
                    sign:sign.sign
                })
                    .then(function (res) {
                        console.log(res);
                        if(res.data.success){
                            sessionStorage.setItem('isActivation',"1");
                            _this.setState({
                                isShow:true
                            });
                            setTimeout(function () {
                                browserHistory.push('/');
                            },500)
                        }
                    })
            })
            .catch(function (err) {
                console.log(err)
            })
    }
    handleShowImg(e){
        this.setState({
            dialogImg:"true",
            imgSrc:e.target.src
        })
    }
    dialogImgShow(msg,src){
        this.setState({
            dialogImg:msg,
            imgSrc:src
        })
    }

    render(){
        const informationLists = this.state.information.split(',');
        console.log(informationLists);
        const informations = informationLists.map((information,i)=>
            <div><img src={information} alt="" onClick={this.handleShowImg.bind(this)}/></div>
        );
        console.log(informations);
        return(
            <div>
                <TopBar/>
                <div className="activation">
                    <h3>账户信息</h3>
                    <div className="atten"><i>!</i>完成账户激活，查看标的信息，如信息有误，请联系 400-088-5313 及时更改。</div>
                    <ul>
                        <li className={this.state.componenyName ? "clearFix" : "clearFix hide"}>
                            <div className="fl">企业全称:</div>
                            <div className="fr"> {this.state.componenyName}</div>
                        </li>
                        <li className={this.state.socialCreditCode ? "clearFix" : "clearFix hide"}>
                            <div className="fl">统一社会信用代码/注册号:</div>
                            <div className="fr">{this.state.socialCreditCode}</div>
                        </li>
                        <li className={this.state.legalName ? "clearFix" : "hide"}>
                            <div className="fl">法人姓名:</div>
                            <div className="fr">{this.state.legalName}</div>
                        </li>
                        <li className={this.state.legalIdentitycard ? "clearFix" : "hide"}>
                            <div className="fl">法人身份证号:</div>
                            <div className="fr">{this.state.legalIdentitycard}</div>
                        </li>
                        <li className={this.state.legalTelphone ? "clearFix" : "hide"}>
                            <div className="fl">法人联系方式:</div>
                            <div className="fr">{this.state.legalTelphone}</div>
                        </li>
                        <li className={this.state.borrowerName ? "clearFix" : "hide"}>
                            <div className="fl">借款人名称:</div>
                            <div className="fr">{this.state.borrowerName}</div>
                        </li>
                        <li className={this.state.identitycardNumber ? "clearFix" : "hide"}>
                            <div className="fl">身份证号:</div>
                            <div className="fr">{this.state.identitycardNumber}</div>
                        </li>
                        <li className="clearFix">
                            <div className="fl">银行账号:</div>
                            <div className="fr">{this.state.bankcard}</div>
                        </li>
                        <li className={this.state.bankName ? "bankname clearFix" :"hide"}>
                            <div className="fl">银行名称:</div>
                            <div className="fr">{this.state.bankName}</div>
                        </li>
                        <li className="clearFix">
                            <div className="fl">银行预留手机号:</div>
                            <div className="fr">{this.state.telephone}</div>
                        </li>
                        <li className="clearFix relevant">
                            <div className="fl">相关资料:</div>
                            <div className="fr clearFix">
                                {informations}
                            </div>
                        </li>
                    </ul>
                    <div className="activate" onClick={this.handleActive.bind(this)}>激活</div>
                    <div className={this.state.isShow ? "activate_success" : "activate_success hide"}>
                        <i className="icon iconfont icon-ic_pass"></i>
                        <p>激活成功！</p>
                    </div>
                </div>
                <Footer/>
                <DialogImg dialogimg = {this.state.dialogImg} dialogimgSrc={this.state.imgSrc} isDialogImgShow = {(msg,src)=>this.dialogImgShow(msg,src)}/>
            </div>
        )
    }
}


export default Activation